page {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  background: #ffffff;
  .search {
    margin-top: calc(var(--status-bar-height) + 20rpx);
    padding: 0 30rpx;
    .search-icon {
      height: 72rpx;
      width: calc(100% - 50rpx);
      background: #f3f3f3;
      border-radius: 36rpx;
      font-size: 26rpx;
      color: #999999;
      padding: 0 30rpx;
    }
  }
  .scroll {
    height: calc(100vh - 92rpx);
    overflow: hidden;
    .tabs {
      padding: 0 30rpx;
      margin-top: 23rpx;
      width: 100%;
      .tab-item {
        width: 345rpx;
        height: 78rpx;
        border: 2rpx solid #1c87f3;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .active_true {
        background: #1c87f3;
        color: #ffffff;
      }
      .active_false {
        background: #ffffff;
        color: #0177fd;
      }
    }
    .chose-area {
      margin-top: 46rpx;
      .chose-type {
        padding: 0 30rpx 20rpx 30rpx;
        display: flex;
        justify-content: space-between;
        .chose-item {
          font-size: 24rpx;
          color: #666;
          display: flex;
          align-items: center;
          .title {
            width: 96rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .icon {
            margin-left: 6rpx;
            display: block;
            width: 0;
            height: 0;
            border-left: 13rpx solid transparent;
            border-top: 15rpx solid #666;
            border-right: 13rpx solid transparent;
          }
        }
      }
    }
    .shop-list {
      padding: 20rpx 30rpx;
      .empty-wrap {
        display: flex;
        flex-direction: column;
        padding: 80rpx 0 100rpx;
        align-items: center;
        .empty-img {
          width: 415rpx;
          height: 415rpx;
        }

        .tips {
          font-size: 30rpx;
          color: #999;
        }
      }
      .shop-item {
        padding: 20rpx 0;
        display: flex;
        align-items: flex-start;
        .img {
          border-radius: 10rpx;
          width: 160rpx;
          height: 160rpx;
          image {
            border-radius: 10rpx;
            width: 160rpx;
            height: 160rpx;
          }
        }
        .item {
          width: calc(100% - 200rpx) !important;
          margin-left: 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title1 {
            width: 470rpx;
            color: #333;
            font-size: 34rpx;
            font-weight: bold;
          }
          .title2 {
            margin-top: 26rpx;
            color: #ff6161;
            font-size: 36rpx;
          }
          .title3 {
            margin-top: 16rpx;
            color: #999;
            font-size: 24rpx;
          }
        }
      }
    }
    .service-list {
      padding: 20rpx 30rpx;
      .empty-wrap {
        display: flex;
        flex-direction: column;
        padding: 80rpx 0 100rpx;
        align-items: center;
        .empty-img {
          width: 415rpx;
          height: 415rpx;
        }

        .tips {
          font-size: 30rpx;
          color: #999;
        }
      }
      .service-item {
        width: calc(100% - 60rpx) !important;
        padding: 20rpx 0;
        display: flex;
        align-items: flex-start;
        .img {
          border-radius: 50%;
          width: 110rpx;
          height: 110rpx;
          image {
            border-radius: 50%;
            width: 110rpx;
            height: 110rpx;
          }
        }
        .item {
          width: 100%;
          margin-left: 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .service-type_new {
            display: flex;
            align-items: center;
            .tag {
              background-color: #f3f9ff;
              font-size: 22rpx;
              color: #1c87f3;
              border: 1rpx solid #1c87f3;
              white-space: nowrap;
              padding: 3rpx 5rpx;
            }

            .title1 {
              width: 470rpx;
              margin-left: 8rpx;
              color: #333;
              font-size: 34rpx !important;
              font-weight: bold;
            }
          }
          .title2 {
            width: 540rpx;
            margin-top: 16rpx;
            color: #666;
            font-size: 24rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .title3 {
            color: #999;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  .cate-title {
    height: 980rpx;
    .title {
      padding: 30rpx;
      display: flex;
      align-items: center;
      .all-cate {
        color: #1c87f3;
        font-size: 28rpx;
      }
      .title-chose {
        flex: 1;
        display: flex;
        justify-content: center;
        color: #333333;
        font-size: 32rpx;
      }
    }
    .VerticalBox {
      display: flex;
    }

    .VerticalNav {
      height: calc(980rpx - 50rpx);
      width: 200rpx;
      white-space: initial;
      background-color: #f1f1f1;
      .first-cate {
        color: #0177fd;
      }
    }
    .VerticalNav .cu-item {
      width: 100%;
      text-align: center;
      background-color: #f1f1f1;
      margin: 0;
      border: none;
      height: 100rpx;
      line-height: 100rpx;
      position: relative;
    }

    .VerticalNav .cu-item.cur {
      background-color: #ffffff;
    }

    .VerticalNav .cu-item.cur::after {
      content: "";
      width: 8rpx;
      height: 30rpx;
      border-radius: 10rpx 0 0 10rpx;
      position: absolute;
      background-color: currentColor;
      top: 0;
      right: 0rpx;
      bottom: 0;
      margin: auto;
    }

    .vertical-main {
      height: calc(980rpx - 50rpx);
      background-color: #ffffff;
      flex: 1;
      .right-main {
        .main-item {
          padding: 30rpx;
          .item-title {
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
          }
          .item-content {
            margin-top: 26rpx;
            display: flex;
            flex-wrap: wrap;
            .item-val {
              margin-bottom: 20rpx;
              margin-right: 17rpx;
              border-radius: 4rpx;
              padding: 10rpx 15rpx;
              height: 56rpx;
              min-width: 126rpx;
              background-color: #f9f9f9;
              color: #666;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}

.ellipsis1 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
